<template>
  <div>
    <el-drawer custom-class="wxkj-drawer content-management-edit-drawer" :title="drawerTitle" :visible.sync="drawerShow" size="500px">
      <div class="drawer-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item v-show="false" label="id：" prop="id">
            <el-input v-model="form.value" />
          </el-form-item>
          <el-form-item label="上级岗位：">
            <el-select ref="menu_select" v-model="parentIdLabel" clearable placeholder="请选择" collapse-tags style="width:100%">
              <el-option :value="form.pcode" style="height: auto">
                <el-tree ref="tree" :data="menuTree" highlight-current :props="defaultProps" @node-click="handleNodeClick" />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位名称：" prop="name">
            <el-input v-model="form.label" />
          </el-form-item>
          <div class="drawer-form-buttom-group">
            <el-button type="primary" @click.native="submit()">保存</el-button>
            <el-button @click="drawerClose">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <icon ref="icon" @icon="selectedIcon" />
  </div>
</template>

<script>
import { add_v2, edit_v2, list_v2 } from '@/api/position'
import icon from '@/components/IconDialog'

export default {
  components: { icon },

  data() {
    return {
      parentIdLabel: '',
      menuTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      drawerShow: false,
      drawerTitle: '',
      thumb_dictText: '', // 展示缩略图使用
      form: {
        value: '',
        label: '',
        pcode: '',
        code: ''
      },
      rules: {
        label: [{
          required: true,
          message: '请填写岗位名称',
          trigger: 'blur'
        }]
      }
    }
  },
  watch: {
    drawerShow(bl) {
      if (!bl) {
        this.$refs.form.resetFields()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    selectIcon() {
      this.$refs.icon.show()
    },
    selectedIcon(icon) {
      this.form.icon = icon
    },
    handleNodeClick(data) {
      this.$refs.menu_select.blur()
      this.form.pcode = data.code
      this.parentIdLabel = data.label
    },
    // 关闭弹窗
    drawerClose() {
      this.drawerShow = false
      this.$emit('refresh')
    },
    // 弹窗打开
    show(title, rowData) {
      // this.topBlockId=topBlockId;
      this.drawerTitle = title
      this.drawerShow = true
      // console.log(rowData);
      if (rowData != null) {
        // 编辑传参
        try {
          if (rowData) {
            Object.keys(rowData).forEach(k => {
              this.form[k] = rowData[k]
            })
          }
        } catch (e) {
          // TODO handle the exception
        }
      } else { // 新增
        this.form = {
          value: '',
          label: '',
          pcode: null,
          code: ''
        }
      }
      list_v2({}).then(response => {
        const list = response.result
        const menuTree = []
        this.parentIdLabel = this.findParentLabel(this.form.pcode, list)
        for (let i = 0; i < list.length; i++) {
          const element = list[i]
          if (element.code !== this.form.code) { // 排除自己
            menuTree.push(element)
          }
        }
        this.menuTree = menuTree
      })
    }, // end of show
    findParentLabel(pcode, list) {
      if (list === null) {
        return ''
      }
      for (let i = 0; i < list.length; i++) {
        const ele = list[i]
        if (ele.code === pcode) {
          return ele.label
        }
        const label = this.findParentLabel(pcode, ele.children)
        if (label) {
          return label
        }
      }
    },
    // 保存
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.pcode === this.form.code) {
            this.$message({
              type: 'warn',
              message: '不能选择自己作为父节点!'
            })
            return
          }
          if (this.form.code) {
            // 编辑
            const params = this.form
            params.id = this.form.value
            params.name = this.form.label
            edit_v2(params).then((response) => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          } else {
            const params = this.form
            params.name = this.form.label
            add_v2(this.form).then((response) => {
              this.$message({
                type: 'success',
                message: '添加成功！'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          }
        }
      })
    }

  }
}
</script>
<style lang="scss">
    .content-management-edit-drawer {
        .drawer-content {
            padding: 20px;

            .upload-img {
                .el-upload {
                    width: 200px;
                    height: 100px;
                    line-height: 110px;
                }
            }
        }
    }
</style>
